<template>
   <div id="bar-echart" tips="共有6个任务执行成功" v-tooltip>点我12132</div>
</template>

<script setup>
    // 自定义提示指令
    const vTooltip = {
      mounted: function(el, binding) {
        console.log("111")
        // 鼠标移入时，将浮沉元素插入到body中
        el.onmouseenter = function(e) {
          debugger
          // 创建浮层元素并设置样式
          const vcTooltipDom = document.createElement('div');
          vcTooltipDom.style.cssText = `
          overflow: auto;
          position:absolute;
          background: #fff;;
          color:#666;
          box-shadow: rgba(168, 168, 168, 0.295) 1px 2px 10px;
          border-radius:5px;
          padding:10px;
          display:inline-block;
          font-size:14px;
          z-index:2
        `;
          // 设置id方便寻找
          vcTooltipDom.setAttribute('id', 'vc-tooltip');
          // 将浮层插入到body中
          document.body.appendChild(vcTooltipDom);
          // 浮层中的文字 通过属性值传递动态的显示文案
          document.getElementById('vc-tooltip').innerHTML = el.getAttribute('tips');
        };
        // 鼠标移动时，动态修改浮沉的位置属性
        el.onmousemove = function(e) {
          const vcTooltipDom = document.getElementById('vc-tooltip');
          vcTooltipDom.style.top = e.clientY + 15 + 'px';
          vcTooltipDom.style.left = e.clientX + 15 + 'px';
        };
        // 鼠标移出时将浮层元素销毁
        el.onmouseleave = function() {
          // 找到浮层元素并移出
          const vcTooltipDom = document.getElementById('vc-tooltip');
          vcTooltipDom && document.body.removeChild(vcTooltipDom);
        };
      }
    }
</script>



<style scoped>
    .tooltip {
    position: relative;
    }
    .tooltip:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    }
    .tooltip:hover:before {
    display: block;
    }
</style>